<template>
  <div class="order">
    <mt-header title="订单">
      <router-link to="/cart" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <router-link to="/user-address">
      <div v-if="!list.address" class="order-header">
        <div class="order-header-left1">还没有默认收货地址，点击添加收货地址</div>
        <div class="order-header-right">
          <img src="../../assets/img/btn_right.png" width="10" height="20">
        </div>
      </div>
      <div v-else class="order-header">
        <div class="order-header-left1">
          <div class="content-header-left1-top1">
            <span class="font1"> {{list.address.consignee}}</span><span class="font2">{{list.address.phone}} </span>
          </div>
          <div class="content-header-left1-top2">
            <span style=""> {{list.address.address}}</span>
          </div>
        </div>
        <div class="order-header-right">
          <img src="../../assets/img/btn_right.png" width="10" height="20">
        </div>
      </div>
    </router-link>
    <div class="content-space"></div>
    <div class="content-list">
      <div class="itemWrapper">
        <div class="item-row1">
          <div class="item-row1-left1">
            <img
              src="../../assets/img/iconfont-jiantou.png"
              width="20"
              height="20"
              class="logo-img"
            >
          </div>
          <div class="item-row1-left2">
            <span>美麦就好</span>
          </div>
        </div>
        <div class="product" v-for="(item,index) of list.items" :key="index">
          <div class="itemMainDiv">
            <router-link :to="'/detail/' + item.goodsId">
              <img
                class="itemPhoto"
                :src="item.img"
                :alt="item.name"
              >
            </router-link>
            <div class="contentLiDiv">
              <div class="itemProName">{{item.name}}</div>
              <div class="itemProContent" v-show="item.point">积分：{{item.point}}</div>
            </div>
            <div class="rightWrapper">
              <div class="itemProPrice">￥ {{item.price}}</div>
              <div class="itemProCount">x{{item.quantity}}</div>
            </div>
          </div>
        </div>
        <div class="white-list">
          <div class="list-one express-type button buttonclick send_way" @click="peisong">
            <div class="left-title">
              <span>配送方式:</span>
            </div>
            <div class="center-content" style="width: 58%">
              <span>
                <span>{{shippingTypeName}}</span>
              </span>
            </div>
            <div class="right-action">
              <img src="../../assets/img/btn_right.png" width="10" height="20">
            </div>
          </div>
          <mt-actionsheet
            :actions="sheetData"
            v-model="sheetVisible">
          </mt-actionsheet>

          <div class="line"></div>
          <!-- <div class="list-one coupon button buttonclic">
            <div class="left-title">
              <span>优惠券：</span>
              <span class="select_coupon_span_r">1张可用</span>
            </div>
            <div class="right-action">
              <img src="../../assets/img/btn_right.png" width="10" height="20">
            </div>
          </div>
          <div class="line"></div> -->
          <!--优惠券-->
          <!--购物币-->
          <!-- <div class="itembutton">
            <div class="top">
              <span>
                积分:{{list.point}}(可抵扣
                <a id="deductible_curr_-1">0</a>)
              </span>
              <mt-switch v-model="jifen"></mt-switch>
            </div>
            <div class="currency_-1" style="display:none">
              <div class="line"></div>
              <div class="bottom">
                <input
                  onkeyup="clearNoNum(this);"
                  max_currr="0"
                  class="user_currency"
                  supply_id="-1"
                  id="user_currency_-1"
                  placeholder="请输入抵用积分数量"
                  value
                >
              </div>
            </div>
          </div> -->
          <!--购物币-->
          <!--买家留言-->
          <div class="list-one">
            <div class="left-title">
              <span>买家留言:</span>
            </div>
            <div class="center-content1 text-hidden" style="padding:0 10px;">
              <input type="text" placeholder="选填, 可填写你和卖家达成一致的要求" class="in-text remark" v-model="message">
            </div>
          </div>
          <div class="line"></div>
          <!--买家留言-->
          <div class="list-one-right">
            <span>共{{list.totalCount}}件</span>
            <span class="margin-left-span">合计:</span>
            <span class="span3">
              <span style="display:none;" class="choose_shop_integral">0(商城积分) +</span>
              <span style="display:none;" class="choose_store_integral">0(门店积分) +</span>
              <span class="express_span">￥ {{list.total}}</span>
            </span>
          </div>
          <input type="hidden" class="is_theirself" value="0">
          <input type="hidden" class="sum_express_supply" value="0">
          <input type="hidden" class="sum_price_supply" id="sum_price_supply_-1" value="876">
        </div>
      </div>
    </div>
    <group title="选择支付方式">
      <radio :options="options"  @on-change="change"></radio>
    </group>
    <!-- <div class="itembutton">
      <div class="top">
        <span>使用会员卡</span>
        <mt-switch v-model="dazhe"></mt-switch>
      </div>
      <div class="card" v-show="dazhe">
        <div class="line"></div>
        <div class="bottom">
          <div class="card_info">
            <p>会员卡：</p>
            <p>余额：{{list.cardBalance}}，积分：588，折扣：100%</p>
          </div>
        </div>
      </div>
    </div> -->
    <div class="foote">
      <div class="top choose_shop_integral" style="display:none">
        <div class="left">需付商城积分</div>
        <div class="right" id="sum_need_integral" sum_need_integral="0">0</div>
      </div>

      <div class="top choose_store_integral" style="display:none">
        <div class="left">需付门店积分</div>
        <div class="right" id="sum_need_store_integral" sum_need_store_integral="0">0</div>
      </div>
      <div class="top" style="display:none">
        <div class="left">优惠</div>
        <div class="right" id="save_money" save_money="0">-￥0</div>
      </div>
      <div class="top">
        <div class="left">余额</div>
        <div class="right" id="curr_money" curr_money="0">￥{{list.balance}}</div>
      </div>
      <div class="top">
        <div class="left">会员卡余额</div>
        <div class="right" id="curr_money" curr_money="0">￥{{list.cardBalance}}</div>
      </div>
      <div class="top">
        <div class="left">运费</div>
        <div class="right" id="sum_express" sum_express="0">￥{{freight}}</div>
      </div>
      <div class="top">
        <div class="left">商品金额</div>
        <div class="right" id="sum_price">￥ {{list.total}}</div>
      </div>
    </div>
    <div style="overflow:hidden;height: .1rem;"></div>
    <div class="am-navbar am-cf am-navbar-default am-no-layout bottomButton">
      <div class="bottomButton-left">
        <span>共{{list.totalCount}}件</span>
        <span>合计:</span>
        <span class="bottomButton-left-right-span" id="sum_all_money">￥{{list.total + freight}} {{list.totalPoint?"+"+list.totalPoint:""}}</span>
      </div>
      <div class="bottomButton-rightWrapper new_pay" style="margin-top:7px">
        <span @click="handleClickBtn">立即支付</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Radio, Group } from 'vux'
import axios from 'axios'
import { Toast, MessageBox } from 'mint-ui'
export default {
  name: 'Order',
  components: {
    Radio,
    Group
  },
  data () {
    return {
      list: [],
      jifen: false,
      dazhe: true,
      addressId: '',
      message: '',
      weiXin: {
        appId: '',
        timeStamp: '',
        nonceStr: '',
        packageWeixin: '',
        paySign: ''
      },
      freight: 0,
      shippingTypeId: '',
      shippingTypeName: '',
      payValue: '',
      options: [],
      sheetData: [],
      sheetVisible: false
    }
  },
  methods: {
    change (value, label) {
      this.payValue = value
      console.log('change:', value, label)
      console.log('payValue:', this.payValue)
    },
    getInfo () {
      const data = sessionStorage.getItem('tcartItemDOs')
      if (data) {
        axios.get('/meimai/interface/order/orderInfo' + data).then((res) => {
          let datas = res.data
          // console.log(datas)
          if (datas.code === 0) {
            if (!datas.data.address) {
              MessageBox.confirm('是否马上添加收货地址?').then(action => {
                this.$router.push('/user-address')
              })
            }
            this.list = datas.data
            this.addressId = datas.data.address.id
            if (datas.data.payType) {
              datas.data.payType.forEach((val) => {
                this.options.push({'value': val.label, 'key': val.value})
              })
            }
            // // this.options = datas.data.payType
            // console.log(datas.data.payType)
            // this.shippingTypeId =
            datas.data.shippingType.forEach((v, i) => {
              this.sheetData.push({
                name: v.name,
                method: this.switchSys,
                id: v.id
              })
              if (i === 0) {
                this.shippingTypeId = v.id
                this.shippingTypeName = v.name
              }
            })
            if (this.shippingTypeId === 2) {
              this.freight = datas.data.freight
            } else {
              this.freight = 0
            }
          } else {
            this.$router.push('/cart')
          }
        })
      } else {
        this.$router.push('/cart')
      }
    },
    peisong () {
      this.sheetVisible = true
    },
    switchSys (data) {
      this.shippingTypeId = data.id
      this.shippingTypeName = data.name
      if (this.shippingTypeId === 2) {
        this.freight = this.list.freight
      } else {
        this.freight = 0
      }
    },
    isWeixinBrowser () {
      let ua = navigator.userAgent.toLowerCase()
      return !!(/micromessenger/.test(ua))
    },
    handleClickBtn () {
      if (!this.$store.state.userId) {
        this.$router.push('/login')
        return false
      }
      if (!this.payValue) {
        Toast('请选择支付方式')
        return false
      }
      let wxPayType = ''
      if (this.isWeixinBrowser()) {
        wxPayType = 'JSAPI'
      } else {
        wxPayType = 'MWEB'
      }
      axios.get('/meimai/interface/order/save', {
        params: {
          'memberId': this.$store.state.userId,
          'addressId': this.addressId,
          'payTypeId': this.payValue,
          'shippingTypeId': this.shippingTypeId,
          'message': this.message,
          'wxPayType': wxPayType
        }
      }).then((res) => {
        // console.log(res)
        // console.log(res.data.payUrl)
        if (this.payValue === '4' || this.payValue === '1') {
          // this.$router.push(res.data.payUrl)
          console.log(res)
          if (res.data.code === 0) {
            // console.log(res)
            Toast('支付成功')
            this.$router.push('/user')
          } else {
            // console.log(res)
            Toast(res.data.msg)
            this.$router.push('/cart')
          }
        }
        if (this.payValue === '2') {
          // this.$router.push(res.data.payUrl)
          if (this.isWeixinBrowser()) {
            this.weiXin.appId = res.data.appId
            this.weiXin.timeStamp = res.data.timeStamp
            this.weiXin.nonceStr = res.data.nonceStr
            this.weiXin.packageWeixin = res.data.package
            this.weiXin.paySign = res.data.paySign
            if (typeof WeixinJSBridge === 'undefined') {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
                document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
              }
            } else {
              this.onBridgeReady()
            }
          } else {
            window.location.href = res.data.payUrl
          }
        }
        if (this.payValue === '3') {
          const div = document.createElement('div') // 创建div
          div.innerHTML = res.data.payUrl // 将返回的form 放入div
          document.body.appendChild(div)
          document.forms[0].submit()
        }
      })
    },
    onBridgeReady (appId, timeStamp, nonceStr, packageWexin, paySign) {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          'appId': this.weiXin.appId, // 公众号名称，由商户传入
          'timeStamp': this.weiXin.timeStamp, // 时间戳，自1970年以来的秒数
          'nonceStr': this.weiXin.nonceStr, // 随机串
          'package': this.weiXin.packageWeixin,
          'signType': 'MD5', // 微信签名方式
          'paySign': this.weiXin.paySign // 微信签名
        },
        function (res) {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            Toast('支付成功')
          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            Toast('取消支付')
          } else {
            Toast('支付失败')
          }
        }
      )
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.mint-header
  background: #e00000
.order >>> .mint-radio-input:checked + .mint-radio-core
  border-color: #fd832f;
  background-color: #fd832f;
.order >>> .mint-switch
  float: right
  align-items: center
  margin-right: 10px
  position: relative
  top: 5px
.order >>> .mint-switch-input:checked + .mint-switch-core
  border-color: rgb(253, 131, 47)
  background-color: rgb(253, 131, 47)
.content-space
  background-color: #f8f8f8
  border-top: 1px solid #D1D1D1
  padding: 10px 15px 10px 15px
.order-header
  padding-bottom: 10px
  background: url('../../assets/img/color_ribbon.png') no-repeat bottom
  background-size: 100% 3px
  overflow: hidden
  background-color: #FFF
  position: relative
  .order-header-left1
    padding-top: 0.16rem
    float: left
    margin-left: 18px
    margin-top: 12px
    width: 84%
    font-size: 14px
    color: #707070
    .content-header-left1-top1
      margin-bottom: .09rem
      color: #333
      .font2
        margin-left: .09rem
.order-header-right
  width: 20px
  height: 40px
  margin-right: 10px
  text-align: right
  line-height: 40px
  margin-top: -20px
  position: absolute
  top: 50%
  right: 0px
.content-list
  width: 100%
  overflow: auto
  padding-left: 0px
  .itemWrapper
    padding: 0
    border-radius: 2px
    overflow: hidden
    .item-row1
      width: 100%
      height: 54px
      position: relative
      border: 1px solid #F1F1F1
      background: #fff
      .item-row1-left1
        float: left
        margin-left: 10px
        width: 30px
        height: 35px
        line-height: 48px
      .item-row1-left2
        float: left
        margin-left: 13px
        margin-top: 18px
        font-size: 14px
        color: #707070
    .product
      overflow: hidden
      background-color: #f8f8f8
      .itemMainDiv
        padding: 5px 10px
        position: relative
        .itemPhoto
          border-radius: 2px
          border: 1px solid #B3B3B3
          width: 70px
          height: 70px
          float: left
          background-position: center
          background-size: cover
          background-repeat: no-repeat
        .contentLiDiv
          margin-left: 80px
          margin-right: 75px
          min-height: 73px
          word-break: break-all
          word-wrap: break-word
        .itemProContent
          height: 28px
          line-height: 14px
          font-size: 12px
          overflow: hidden
          margin-top: 5px
          color: #c1c1c1
      .rightWrapper
        width: 95px
        height: 70px
        position: absolute
        top: 0px
        right: 0px
        padding-top: 0px
        text-align: right
        padding-right: 10px
        .itemProPrice
          margin-top: 5px
          line-height: 20px
          font-size: 14px
          color: #FF0000
          overflow: hidden
        .itemProCount
          line-height: 50px
    .white-list
      background-color: white
      border-top: 1px solid #eee
      border-bottom: 1px solid #eee
      font-size: 12px
      .line
        background-color: #eee
        margin-left: 10px
        height: 1px
        margin-right: 10px
      .list-one
        width: 100%
        padding: 15px 0px 15px 0px
        .left-title
          width: 30%
          display: inline-block
          padding-left: 10px
          color: #707070
          font-size: 14px
          vertical-align: middle
          .select_coupon_span_r
            background-color: rgb(255, 0, 1)
            padding: 0px 10px
            color: rgb(255, 255, 255) !important
            position: absolute
            right: 35px
            font-size: 13px !important
            line-height: 20px
            height: 20px
        .center-content
          width: 58%
          display: inline-block
          color: #777
          font-size: 12px
          text-align: right
          padding-right: 0px
          line-height: 20px
          vertical-align: middle
        .right-action
          width: 20px
          display: inline-block
          float: right
          line-height: 17px
    .itembutton
      border-top: 1px solid #eee
      border-bottom: 1px solid #eee
      background-color: #fff
      margin-top: 15px
      list-style: none
      .top span
        display: inline-block
        margin: 15px 0 15px 4%
        color: #707070
        font-size: 14.33px
    .list-one
      width: 100%
      padding: 15px 0px 15px 0px
      box-sizing: border-box
      .left-title
        width: 30%
        display: inline-block
        padding-left: 10px
        color: #222
        font-size: 12px
        vertical-align: middle
        box-sizing: border-box
      .center-content1
        width: 65%
        display: inline-block
        color: #777
        font-size: 12px
        text-align: right
        padding-right: 0px
        line-height: 20px
        vertical-align: middle
        box-sizing: border-box
        input
          width: 100%
    .list-one-right
      width: 100%
      text-align: right
      padding: 15px 10px 15px 0px
      box-sizing: border-box
      span
        line-height: 20px
        height: 20px
        font-size: 14.33px
        color: #000
.itembutton
  border-top: 1px solid #eee
  border-bottom: 1px solid #eee
  background-color: #fff
  margin-top: 15px
  list-style: none
  .top span
    display: inline-block
    margin: 15px 0 15px 4%
    color: #707070
    font-size: 14.33px
  .card_info
    height: 45px
    line-height: 45px
    border: none
    width: 95%
    margin-left: 4%
    font-size: 10px
    color: #9b9b9b
    p
      line-height: 1.5
.foote
  border-top: 1px solid #eee
  border-bottom: 1px solid #eee
  background-color: #fff
  margin-bottom: 2rem
  margin-top: 15px
  list-style: none
  .top
    overflow: hidden
    width: 100%
    height: 35px
    line-height: 35px
    position: relative
    .left
      float: left
      color: #9b9b9b
      padding-left: 4%
    .right
      color: #ed2935
      float: right
      padding-right: 4%
.am-navbar
  height: 65px
  position: fixed
  left: 0
  bottom: 0
  width: 100%
  line-height: 49px
  z-index: 1010
.bottomButton
  bottom: 0px
  border-top: 1px solid #eee
  background: white
  z-index: 1100
  font-size: 0
.bottomButton-left
  vertical-align: middle
  width: 67%
  margin-right: 2%
  height: 49px
  text-align: right
  font-family: '微软雅黑'
  display: inline-block
  font-size: 12px
  margin-top: 7px
  box-sizing: border-box
  .bottomButton-left-right-span
    color: #ed2935
    font-size: 0.3rem
.bottomButton-rightWrapper
  vertical-align: middle
  width: 30%
  padding: 0 18px
  height: 49px
  text-align: center
  display: inline-block
  font-size: 0.28rem
  background: #ec2935
  box-sizing: border-box
  color: #fff
</style>
